<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script type="text/javascript">
        window.onload=function(){
            var boss=document.getElementById("city");
            var element=document.getElementById("ChengDu");

            var Para1=document.createElement("li");
            var Para2=document.createElement("li");
            var Para3=document.createElement("li");

            var node1=document.createTextNode("ChongQing");
            var node2=document.createTextNode("KunMing");
            var node3=document.createTextNode("广州");

            Para1.appendChild(node1);
            Para2.appendChild(node2);
            Para3.appendChild(node3);

            boss.insertBefore(Para1,element);
            boss.insertBefore(Para2,element.nextSibling);
            boss.appendChild(Para3);
        }
    </script>
</head>
<body>
    <p style="color:#0000ff">旅游城市:</p>
    <ul id="city">
        <li id="bj" name="BeiJing">北京</li>
        <li>上海</li>
        <li id="ChengDu">成都</li>
        <li>天津</li>
    </ul>
</body>
</html>